<!--20210309  zaq  修改data中的user变量，与sql表一致-->
<!--20210318  zaq  修改data中user列，与后端保持一致-->
<!--20210324  zaq  用户数据user由父组件统一传值给子组件,新增注销按钮-->

<template>
  <div id="note"  class="note">
<!--    登陆界面-->
    <login-vue
        v-model:loginflag="setLoginFlag"
        v-if="login==='0'"
        v-bind:loginFlag="loginflag"
        v-on:changeLoginFlag="setLoginFlag"
    ></login-vue>
    <!--主界面-->
    <!--  用户登录成功之后跳转的界面-->
    <div class="main" v-else style="width: 100%; height: 100%;position:fixed;">
      <el-row>
        <el-col :span="24" >
          <div class="grid-content bg-purple-dark"
               style="background-color: rgba(0,0,0,0.2);text-align: center;" >
          <p style="font-size: 25px ;color: white">{{user.u_planet}}</p>
            <el-link :underline="false"
                     @click="go_back"
                     style="float: right ;"
            >注销</el-link>
        </div></el-col>
      </el-row>
      <el-container style="height: 100%;padding: 0;margin: 0">
        <el-aside width="200px" style="height: 100% ;background-color:rgba(0,0,0,0.2) ;">
<!--          导航栏-->
          <my-header v-bind:user="user" style=" height: 100%;position:fixed;"></my-header>
        </el-aside>
        <el-main style="height: 100%;padding: 0;margin: 0">
<!--          父子组件绑定-->
          <router-view
              v-bind:user="user"
              v-on:updateUser="updateUser"
          ></router-view>
        </el-main>
      </el-container>
    </div>

  </div>
</template>

<script>
import login from "./views/Login.vue";
import header from "./views/Header.vue";
  export default {
    data(){
      return{
        login:"0",//登录标志，0未登录，1登录
        loginflag:"0",//登录标志，0未登录，1登录
        user:{
          uId:'1',//用户id
          uLogin:'admin',//用户名
          uName:'admin',//用户昵称
          uPwd:'',//密码
          uPlanet:'一颗大傻蛋',//小星球名字
          uCreatedate:'2021-2-20',//用户创建日期
          uBirthday:'1999-9-24',//生日
          uSex:'保密',//性别
          uStatus:'人就是要吃饭',//个性签名
          uAdmin:'1',//管理员标志
          delete:'0'//删除标志
        }
      }
    },
    components:{
      'login-vue':login,
      'my-header':header
    },
    methods:{
      //注销
      go_back(){
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          //执行注销操作
          this.setLoginFlag('0');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },
      //修改login值
      setLoginFlag(login){
        this.loginflag=login;
        this.login=login;
        // this.$router.go(0);
        console.log("login:"+login)
      },
      //更新用户信息
      updateUser(user){
        this.user=user;
      }
    }

  }
</script>


<style>
body{
  margin: 0;
  padding: 0;
}

#note{
  background-image: url("../public/imag/login_background.jpg");
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
}
.note{
  width: 100%;
  height: 100%;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
}



body > .el-input{
  width: 80%;
}

.el-header, .el-footer {
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  /*background-color: #D3DCE6;*/
  color: #333;
  text-align: center;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  width: auto;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>


